<template>
	<div id="inner">
		<div class="autoLeft">
			<div id="boxBorderALL">
				<div v-show="space" class="roleTitle">
					点击角色可查看相应权限
				</div>
				<div id="group" v-show="detaile">
					<div class="bottomLine">用户组详情</div>
					<at-form :model="rightGroup[0]" status-icon ref="usersDate" label-width="92px" class="demo-ruleForm" style='padding:0px 20px 0px 20px'>
						<at-form-item label="用户组名称：" prop="user_group_name" label-width="92px">
							<span style="font-size:12px">{{rightGroup.length == 0?'无':rightGroup[0].user_group_name}}</span>
						</at-form-item>
						<at-form-item label="角色：" prop="role_name" id="roleCheckout">
							<p v-for="item in rightGroup">
								<at-tooltip class="item" effect="dark" :content="item.role" placement="top">
									<span>{{item.role_name}}</span>
								</at-tooltip>
							</p>
						</at-form-item>
					</at-form>
				</div>
				<addgroups v-show="add"></addgroups>
				<upgroup :groupId="id" v-show="updates"></upgroup>
			</div>
			<div class='groupBotton'>
				<span class="topTitle">用户组管理列表</span>
				<div class="leftBox">
					<at-col>
						<!-- <at-button @click="addGroup" type="primary" class="addButton"><span class="saas-icon-ten"></span>新增</at-button> -->
						<at-button @click="usersShow" type="primary" class='messageCount' size="bigger"><span class="saas-icon-page-refresh" style="position:relative;top:2px"></span>查看同步信息</at-button>
						<span v-if="messageCount>0" :class="{'doubleNum':messageCount.toString().length === 2, 'singleNum': messageCount.toString().length === 1, 'more': messageCount>99, 'common': true}">
			                <span class="infoCount" v-if="messageCount<=99"> {{messageCount}}</span>
			                <span class="infoCount" v-else>99+</span>
			             </span>
						<at-search class="searchFloat" v-model="input" placeholder="请输入用户组名称" type="text" project='mh'
						 @keyup.enter.native="select" icon="search" :on-icon-click="select"></at-search>
					</at-col>
					<at-table :data="options" @row-click="rowClick" class="groupTable">
						<at-table-column prop="auser_group_name" label="用户组">
						</at-table-column>
						<at-table-column prop="count" label="组内用户数">
						</at-table-column>
						<at-table-column prop="r_person" label="创建人">
						</at-table-column>
						<at-table-column prop="r_time" label="创建时间">
						</at-table-column>
						<!-- <at-table-column prop="user_group_id" label="操作">
							<template slot-scope="scope">
								<span class="saas-icon-pencil" style="font-size: 20px; color: rgb(31, 146, 239);" @click.stop="update(scope.row)"></span>
								<span class="saas-icon-del" style="font-size: 20px; color: rgb(31, 146, 239);" @click.stop="del(scope.row)"></span>
							</template>
						</at-table-column> -->
					</at-table>
					<Pagination :currentPage="currentPage" :total="total" :pageSizes="pageSizes" :pageSize="pageSize" layout='total, sizes, prev, pager, next, jumper'
					 @current-change="handleCurrentChange" @size-change="handleSizeChange"></Pagination>
				</div>
			</div>
		</div>
		<!-- <at-dialog title='提示' :visible.sync='suredeleteone'>
			<span>确认删除</span>
			<div slot='footer' class='dialog-footer'>
				<at-button type='primary' @click.stop='deletemsgone'>确 定</at-button>
				<at-button @click.stop='cancel'>取 消</at-button>
			</div>
		</at-dialog> -->
	</div>
</template>
<script>
	import upgroup from '../../../../components/group/updategroup.vue'
	import addgroups from '../../../../components/group/addgroup.vue'
	import { mapState } from 'vuex'
	export default {
	  name: 'newusersCtrl',
	  data () {
	    return {
	      row: {},
	      suredeleteone: false,
	      id: '',
	      input: '',
	      type: '', // 提交类型(add,update)
	      usersDate: {
	        user_group_name: '', // 用户组名称
	        role_name: [], // 角色名称
	        user_group_id: '' // 用户组ID
	      },
	      pageSizes: [20, 40, 80]
	    }
	  },
	  components: {
	    addgroups, upgroup
	  },
	  computed: {
	    space: {
	      get () {
	        return this.$store.state.group.space
	      },
	      set (row) {
	        this.$store.state.group.space = row
	      }
	    },
	    detaile: {
	      get () {
	        return this.$store.state.group.groupDetailflage
	      },
	      set (row) {
	        this.$store.state.group.groupDetailflage = row
	      }
	    },
	    add: {
	      get () {
	        return this.$store.state.group.addGroupflag
	      },
	      set (row) {
	        this.$store.state.group.addGroupflag = row
	      }
	    },
	    updates: {
	      get () {
	        return this.$store.state.group.upGroupflag
	      },
	      set (row) {
	        this.$store.state.group.upGroupflag = row
	      }
	    },
	    ...mapState({
	      options: state => state.group.userDate.table, // 用户组列表
	      userUse: state => state.group.roleName, // 角色名称
	      rightGroup: state => state.group.rightGroup, // 右侧详情信息
	      messageCount: state => state.group.groupCount, // 变更信息数量
	      pageSize: state => state.group.userDate.pagination.pageSize,
	      currentPage: state => state.group.userDate.pagination.current,
	      total: state => state.group.userDate.total
	    })
	  },
	  methods: {
	    handleSizeChange (el) {
	      this.$store.commit('group/getPageize', el)
	      this.$store.dispatch('group/getGroup')
	    },
	    // 显示第几页
	    handleCurrentChange (ev) {
	      this.$store.commit('group/getCurrent', ev)
	      this.$store.dispatch('group/getGroup')
	    },
	    usersShow () {
	      this.$router.push('/business/auth/group/syncgroup')
	    },
	    deletemsgone () {
	      this.$store.dispatch('group/delUsergroup', { 'user_group_id': this.row.user_group_id, 'r_person': this.$store.state.system.currentUser.user_name, 'user_group_name': this.row.auser_group_name })
	      this.$store.dispatch('group/getGroup')
	      this.$store.dispatch('system/auth') // 修改用户信息时重新存入session
	      this.suredeleteone = false
	    },
	    cancel () {
	      this.suredeleteone = false
	    },
	    select () {
	      // 搜索
	      this.$store.commit('group/Syncvalue', this.input)
	      this.$store.dispatch('group/getGroup')
	    },
	    // 新增用户组按钮
	    addGroup () {
	      this.add = true
	      this.space = false
	      this.detaile = false
	      this.updates = false
	    },
	    // 修改按钮
	    update (row) {
	      this.updates = true
	      this.space = false
	      this.detaile = false
	      this.add = false
	      this.id = row.user_group_id
	    },
	    del (row) {
	      // 禁用用户组
	      this.suredeleteone = true
	      this.row = row
	    },
	    rowClick (row) {
	      this.add = false
	      this.updates = false
	      this.detaile = true
	      this.space = false
	      this.$store.dispatch('group/getRightdetail', { 'user_group_id': row.user_group_id })
	    }
	  },
	  mounted () {
	    this.$store.dispatch('group/getGroup') // 获取用户组
	    this.$store.dispatch('group/getRole') // 获取用户组角色
	    this.$store.dispatch('group/getSyncgroup')
	  },
	  watch: {
	    space (val, oldval) {
	      this.$store.dispatch('group/getGroup') // 获取用户组
	      this.$store.dispatch('group/getRole') // 获取用户组角色
	      this.$store.dispatch('group/getSyncgroup')
	    },
	    $route (to, from) {
	      if (to.name === '@用户组管理') {
	        this.$store.dispatch('group/getGroup') // 获取用户组
	        this.$store.dispatch('group/getRole') // 获取用户组角色
	        this.$store.dispatch('group/getSyncgroup')
	      }
    }
	  }
	}
</script>
<style scoped>
  #roleCheckout {
		width: auto;
	}
	#roleCheckout p{
		width: 110px;
		font-size: 12px
	}
	#inner .searchFloat {
		float: right
	}

	#boxBorderALL ul {
		list-style: none;
		width: 130px;
		margin-left: 13%;
	}
	#inner .autoLeft>div:nth-child(1) {
    float: right;
    min-width: 478px;
    max-width: 478px;
    background-color: white;
}
	#inner .at-form-item:last-child {
			border-top: none !important;
			padding-top: 0 !important;;
	}

	/* #boxBorderALL .top {
		border-bottom: 1px solid #EEE;
		padding: 10px 0 10px 0
	} */
	#inner .autoLeft>div:nth-child(2) {
    margin-right: 498px;
    border-right: 1px solid #EEE;
		background-color: white;
	}
	/* #boxBorderALL .big-title {
		border-bottom: 1px solid #EEE;
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		font-weight: bold;
		width: 100%;
		color: #5c6781;
		font-size: 14px
	} */

	#boxBorderALL .title {
		padding: 33px;
	}

	.selectInput {
		float: right
	}

	.roleTitle {
		height: 50px;
    	line-height: 50px;
    	padding-left: 20px;
	}
	#inner .saas-icon-ten{
    font-size: 20px;
    vertical-align: -4px;
    margin-right: 5px
  }
  #inner .saas-icon-page-refresh{
    font-size: 20px;
    vertical-align: -4px;
    margin-right: 5px
  }
  #inner .doubleNum {
  width: 25px;
  margin-top: 4px;
  border-radius: 8.5px;
  }
  #inner .singleNum {
    width: 17px;
    border-radius: 50%;
    top: -15px;
    position: relative;
    left: -14px;
  }
  #inner .more {
    width: 32px;
    border-radius: 8.5px;
  }
  #inner .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    position: relative;
    left: -14px;
    top: -15px;
  }
  #inner .infoCount {
    display: block;
    color: #FFFFFF;
    height: 17px;
    line-height: 18px;
    text-align: center;
    font-size : 10px;
    -webkit-transform : scale(0.84,0.84) ;
    *font-size:10px;
  }
  #inner .searchFloat {
    float: right;
  }

  #inner .leftBox {
    padding: 10px 20px 20px 20px
  }
  /*左侧大标题*/
  #inner .topTitle {
    display: block;
    border-bottom: 1px solid #EEE;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    padding-left: 20px;
    color: #5c6781;
    font-weight: bold;
  }

  #inner .messageCount {
    position: relative !important;
  }

  #inner .autoLeft {
    overflow: hidden;
    /*    min-height: 900px;*/
  }

  #inner .autoLeft>div:nth-child(1) {
    float: right;
    min-width: 478px;
    max-width: 478px;
    background-color: white;
  }

  #inner .autoLeft>div:nth-child(2) {
    margin-right: 498px;
    border-right: 1px solid #EEE;
    background-color: white;
    /*    margin-bottom: -900px;
    padding-bottom: 900px*/
  }

  #inner .msg {
    border-radius: 50%;
    background-color: #1f92ef;
    color: #fff;
    position: absolute;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    right: -8px;
    top: -8px;
    font-size: 10px;
  }

  #inner .maxMsg {
    width: 25px;
    height: 25px;
    line-height: 25px;
    top: -10px;
    right: -13px;
  }

  #inner>.at-col {
    background-color: white;
  }

  #inner>.at-col:nth-child(1) {
    float: none;
    padding: 10px 20px 9px 20px;
    border-bottom: 1px solid #EEE;
  }

  .tableBox {
    padding: 15px;
    border: 1px solid #EEE
  }

  #inner.top {
    overflow: hidden;
  }

  #inner .inputsize {
    float: right;
  }

  #inner .floatRight {
    float: right;
  }

 /* #inner .addleft .at-button {
    width: 120px;
    height: 32px;
    margin-left: 10px
  }*/

  #inner .at-pagination {
    margin-top: 10px;
    width: 40%;
    margin: 0px auto;
    height: 30px;
    margin-top: 20px
  }
  #inner {
    overflow: hidden;
    width: 100%;
    /*   background-color: white;*/
    min-height: 900px;
  }

  #inner .at-button+.at-button {
    margin: 0;
    position: relative;
  }
</style>
<style>
#inner #group .at-form-item .at-form-item__label {
  color: #758697;
  margin-bottom: 0px;
}
#inner #group .at-form {
  margin-top: 10px;
}
#inner #group .at-form-item {
  margin-bottom: 0px;
}
</style>